import React, { useState, useEffect } from "react";
import styles from "./index.module.css";
import { Tabs,NavBar } from "antd-mobile";
import http from "../../utils/http";
import { CheckCircleFill, EyeFill,EyeOutline,StarOutline,LikeOutline } from "antd-mobile-icons";

import top from "./images/case-topImage.jpg";
import { useNavigate } from "react-router-dom";

const Index: React.FC = () => {
  const [list, setList] = useState<string[]>([]);
  // 调取接口获取数据
  const fetchData = async () => {
    const response = await http.get("/book/list");
    const { code, data } = response.data;
    if (code === 20000) {
      setList(data);
      // console.log(data);
    }
  };
  useEffect(() => {
    fetchData();
  }, []);

  const navigate = useNavigate()

  const toActivity = ()=>{
    navigate('/activity')
  }

  return (
    <div className={styles.case_box}>
       <NavBar backIcon={false} style={{backgroundColor:'#fff'}}>患者案例</NavBar>
      {/* 顶部广告图片 */}
      <img src={top} className={styles.top_image} onClick={toActivity}/>
      {/* tab切换列表 渲染列表数据 */}
      <Tabs
        active-line-color="--adm-color-primary"
        style={{
          flex: "none",
        }}
      >
        {/* tab---最新 */}
        <Tabs.Tab
          title="最新"
          key="new"
          style={{
            width: "4rem",
            flex: "none",
            padding: "0 0.1rem",
          }}
        >
          {list.length > 0 &&
            list.map((item:any, index) => (
              <div className={styles.article} key={index}>
                <div className={styles.user}>
                  {/* 头像 */}
                  <div className={styles.avatar}>
                    <img src={item.doctorimage} alt="" />
                  </div>
                  <div className={styles.name}>
                    <p>
                      <li className={styles.username}>{item.doctorname}</li>
                      <li className={styles.logo}>
                        {" "}
                        <span>
                          <CheckCircleFill />
                        </span>{" "}
                        {item.doctorstate}
                      </li>
                    </p>
                    <p className={styles.hospital}>{item.doctoradministre}</p>
                  </div>
                </div>
                <div className={styles.content}>
                  {/* 标题 */}
                  <h4>
                    {item.textdise}
                  </h4>
                  {/* 图片 */}
                  <div className={styles.content_images}>
                    <img src={item.textimage} alt="" />
                    <img src={item.doctorimage} alt="" />
                    <img src={item.doctorimage} alt="" />
                  </div>
                </div>
                <p className={styles.declaration}>
                  (声明：文本仅用于科普用途，为保护患者隐私，以下内容的相关信息已经进行处理)【基本信息】信息信息
                </p>
                <p className={styles.tag}>
                  <li className={styles.tag_logo}>
                    <span>
                      <EyeFill />{" "}
                    </span>{" "}
                    {item.doctoradministre}·案例
                  </li>
                </p>
          {/* 文章底部浏览量、评论、点赞 */}
            <div className={styles.icon}>
              <div className={styles.Browse}>
                <div className={styles.icon_main}><EyeOutline /> {item.doctorbrowse}</div>
              </div>
              <div className={styles.collect}>
                <div className={styles.icon_main}><StarOutline /> {item.doctortime}</div>
              </div>
              <div className={styles.like}>
                <div className={styles.icon_main}><LikeOutline /> {item.doctorgood}</div>
              </div>
            </div>
              </div>
            ))}
        </Tabs.Tab>

        {/* tab---最热 */}
        <Tabs.Tab
          title="最热"
          key="hot"
          style={{
            width: "4rem",
            flex: "none",
            padding: "0 0.1rem",
          }}
        >
          {list.length > 0 &&
            list.map((item:any, index) => (
              <div className={styles.article} key={index}>
                <div className={styles.user}>
                  {/* 头像 */}
                  <div className={styles.avatar}>
                    <img src={item.textimage} alt="" />
                  </div>
                  <div className={styles.name}>
                    <p>
                      <li className={styles.username}>{item.doctorname}</li>
                      <li className={styles.logo}>
                        {" "}
                        <span>
                          <CheckCircleFill />
                        </span>{" "}
                        {item.doctorstate}
                      </li>
                    </p>
                    <p className={styles.hospital}>{item.doctoradministre}</p>
                  </div>
                </div>
                <div className={styles.content}>
                  {/* 标题 */}
                  <h4>
                    {item.textdise}
                  </h4>
                  {/* 图片 */}
                  <div className={styles.content_images}>
                    <img src={item.textimage} alt="" />
                    <img src={item.doctorimage} alt="" />
                    <img src={item.doctorimage} alt="" />
                  </div>
                </div>
                <p className={styles.declaration}>
                  (声明：文本仅用于科普用途，为保护患者隐私，以下内容的相关信息已经进行处理)【基本信息】信息信息
                </p>
                <p className={styles.tag}>
                  <li className={styles.tag_logo}>
                    <span>
                      <EyeFill />{" "}
                    </span>{" "}
                    {item.doctoradministre}·案例
                  </li>
                </p>
          {/* 文章底部浏览量、评论、点赞 */}
            <div className={styles.icon}>
              <div className={styles.Browse}>
                <div className={styles.icon_main}><EyeOutline /> {item.doctorbrowse}</div>
              </div>
              <div className={styles.collect}>
                <div className={styles.icon_main}><StarOutline /> {item.doctortime}</div>
              </div>
              <div className={styles.like}>
                <div className={styles.icon_main}><LikeOutline /> {item.doctorgood}</div>
              </div>
            </div>
              </div>
            ))}
        </Tabs.Tab>
      </Tabs>
    </div>
  );
};

export default Index;
